<template>
  <div class="min-h-screen bg-gray-100 flex flex-col">
    <!-- 主布局容器 -->
    <div class="flex flex-1 overflow-hidden">
      <!-- 左侧边栏 - 幻灯片导航 (20%) -->
      <div class="w-1/5 bg-white border-r border-gray-200 p-4 overflow-y-auto">
        <div class="mb-4">
          <h2 class="text-lg font-bold text-gray-800">演示文稿</h2>
        </div>
        
        <!-- 幻灯片列表 -->
        <div class="space-y-3">
          <!-- 新增幻灯片按钮 -->
          <button 
            @click="addNewSlide"
            class="w-full px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 mb-4 text-sm"
          >
            新增页面
          </button>

          <!-- 幻灯片缩略图列表 -->
          <div 
            v-for="(slide, index) in slides" 
            :key="index"
            @click="selectSlide(index)"
            class="group flex items-center p-1 rounded-lg cursor-pointer hover:bg-gray-50"
            :class="{'bg-blue-50': currentSlideIndex === index}"
            draggable="true"
            @dragstart="dragStart($event, index)"
            @dragover.prevent
            @drop="drop($event, index)"
          >
            <!-- 幻灯片序号 -->
            <div class="w-4 text-xs text-gray-500">{{ index + 1 }}</div>
            
            <!-- 幻灯片缩略图 -->
            <div class="flex-1 aspect-[16/9] bg-white rounded border border-gray-200">
              <div class="h-full flex items-center justify-center text-xs text-gray-500">
                {{ index + 1 }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 主编辑区域 (80%) -->
      <div class="flex-1 bg-gray-50 p-6 overflow-y-auto">
        <!-- PPT预览区 -->
        <div class="bg-white rounded-lg shadow-sm p-8 aspect-[16/9]">
          <div v-if="currentSlide" class="h-full">
            <SlidePreview :slideContent="currentSlide.content" />
          </div>
          <div v-else class="h-full flex items-center justify-center text-gray-400">
            点击左侧"新增页面"创建幻灯片
          </div>
        </div>
      </div>
    </div>

    <!-- 全局 Footer -->
    <div class="bg-white border-t border-gray-200 p-4">
      <div class="max-w-screen-xl mx-auto flex items-center space-x-4">
        <div class="flex-1">
          <input
            v-model="aiPrompt"
            type="text"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            placeholder="描述您的需求，AI 将为您生成演示文稿..."
            @keyup.enter="generateSlide"
          />
        </div>
        <button 
          @click="generateSlide"
          class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center"
          :disabled="!aiPrompt || isGenerating"
        >
          <span v-if="isGenerating" class="mr-2">
            <svg class="animate-spin h-5 w-5" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
            </svg>
          </span>
          {{ isGenerating ? '生成中...' : '生成' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import SlidePreview from './components/SlidePreview.vue';

const slides = ref([]);
const currentSlideIndex = ref(-1);
const currentSlide = ref(null);
const aiPrompt = ref('');
const isGenerating = ref(false);

// 选择幻灯片
const selectSlide = (index) => {
  currentSlideIndex.value = index;
  currentSlide.value = slides.value[index];
};

// 新增空白幻灯片
const addNewSlide = () => {
  const newSlide = {
    id: slides.value.length + 1,
    content: `
      <div class="flex flex-col items-center justify-center h-full">
        <h1 class="text-3xl font-bold mb-4">新页面</h1>
        <p class="text-lg text-gray-600">在底部输入框描述您的需求</p>
      </div>
    `
  };
  
  slides.value.push(newSlide);
  selectSlide(slides.value.length - 1);
};

// 生成内容
const generateSlide = async () => {
  if (!aiPrompt.value || isGenerating.value) return;
  
  isGenerating.value = true;
  try {
    // 这里将来会调用后端API，现在用模拟数据
    const mockVueComponent = `
      <div class="flex flex-col items-center justify-center h-full">
        <h1 class="text-3xl font-bold mb-4">生成的内容</h1>
        <p class="text-lg text-gray-600">${aiPrompt.value}</p>
      </div>
    `;
    
    // 模拟API延迟
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    const newSlide = {
      id: slides.value.length + 1,
      content: mockVueComponent
    };
    
    slides.value.push(newSlide);
    selectSlide(slides.value.length - 1);
    aiPrompt.value = '';
  } catch (error) {
    console.error('生成幻灯片失败:', error);
  } finally {
    isGenerating.value = false;
  }
};

// 拖拽开始
const dragStart = (e, index) => {
  e.dataTransfer.setData('text/plain', index);
};

// 放置处理
const drop = (e, newIndex) => {
  const oldIndex = parseInt(e.dataTransfer.getData('text/plain'));
  if (oldIndex === newIndex) return;
  
  const slide = slides.value.splice(oldIndex, 1)[0];
  slides.value.splice(newIndex, 0, slide);
  
  if (currentSlideIndex.value === oldIndex) {
    currentSlideIndex.value = newIndex;
  }
};
</script>

<style>
.w-1/5 {
  width: 20%;
}
</style> 